var bbtTitleText;
var bbtTitleSubtext = '基础体温';
var bbtLegendIcon = 'image://img/overview/bbt.png';

var mensesTitleText = '86分';
var mensesTitleSubtext = '月经分析';
var mensesLegendIcon = 'image://img/overview/menses.png';

var mucusTitleText = '98分';
var mucusTitleSubtext = '宫颈黏液分析';
var mucusLegendIcon = 'image://img/overview/mucus.png';

var titlePosition = 'right';
var legendPosition = 'left';

var bbtLineChart;
var mensesBarChart;
var mucusBarChart;

var titleColor = '#666461';
var titleFontSize = 30;
var titleFontWeight = 100;
var legendItemWidth = 20;
var legendItemHeight = 30;

var gridX = 10;
var gridY = 80;
var gridX2 = 10;
var gridY2 = 30;

var yAxis_min=0;
var yAxis_max=4;
var yAxis_splitNumber=4;


function setEChartConfig(){
      require.config({
					  paths: {
						echarts: './js'
					  }
				    });
}

function drawOverviewChart(){
  	require([
			'echarts',
			'echarts/chart/bar',
			'echarts/chart/line',
			'echarts/chart/map',
	 		],
	 		
	  function (ec) {
		bbtLineChart = ec.init(document.getElementById('bbtLineChart'));
		mensesBarChart = ec.init(document.getElementById('mensesBarChart'));
		mucusBarChart = ec.init(document.getElementById('mucusBarChart'));
		
		setBBTLineChartOption();
		if(mensesStartDateArray.length >=2)	
			setMensesBarChartOption();
		setMucusBarChartOption();	
	  });	  	  
  }
  
  
  /****************************************** 
  	 基础体温
   *******************************************/
   
function setBBTLineChartOption(){
	bbtLineChart.setOption({
		  title : {//标题
					text: bbtTitleText,//主标题
					subtext: bbtTitleSubtext,//副标题
					x: titlePosition,//标题位置
					textStyle:
					{
						color: titleColor,
						fontSize: titleFontSize,
						fontWeight:titleFontWeight
					}  
			
		  },
		  legend: {
					itemWidth: legendItemWidth,
					itemHeight: legendItemHeight,
					x:legendPosition,
					selectedMode:false,
					data:[
							  {
								  icon : bbtLegendIcon,
								  name : ' '
							  }
					]
		  },
		  grid:{
				  x:gridX,
				  x2:gridX2,
				  y:gridY,
				  y2:gridY2,
				  borderWidth: 0
		  },
		  xAxis : [
					{
						show:false,
					  	type : 'category',
					  	data : bbtDateArray
					 }
		  ],
		  yAxis : [
					{
						  show:false,
						  type : 'value'

					 }
		  ],		  
		  color:['#4baedf'], //曲线的颜色设置
		  series : [
						{
						  name:'体温',//图表名称
						  type:'line',//图表类型
						  data: bbtTemperatureArray,
						  smooth:false,//平滑的曲线
						  symbol: 'none',
						  itemStyle: {
						  				normal: {
						  							lineStyle: {width: 1},
						  							areaStyle: {type: 'default'}//填充显示曲线下区域
						  						}
						  			 },
						},
		  ]
		});
}


   /****************************************** 
  	 月经
   *******************************************/
function setMensesBarChartOption(){
	mensesBarChart.setOption({
			title : {
						text: mensesTitleText,
						subtext: mensesTitleSubtext,//副标题
						x: titlePosition,//标题位置
						textStyle:
								  {
									color: titleColor,
									fontSize: titleFontSize,
									fontWeight:titleFontWeight
								  }  
			},
			legend: {
						itemWidth: legendItemWidth,
						itemHeight: legendItemHeight,
						x:legendPosition,
						selectedMode:false,
						data:[
							  {
								  icon : mensesLegendIcon,
								  name : ' '
							  }
						  ]
			},			
			grid:{
					x: gridX,
		  			y: gridY,
		  			x2: gridX2,
		  			y2: gridY2,
				  	borderWidth: 0
			},
			xAxis : [
						{
							show:false,
							type : 'value',
							boundaryGap : [0, 0.01]
						}
			],
			yAxis : [
						{
							show:false,
							type : 'category',
							data : mensesYAxisArray						
						}
			],
			
			series : [
						{
							name:'周期',							
							itemStyle:{
										normal: {
													color: '#F0F0F0',
													barBorderRadius:0,
													label: {
				    											show: true,				    											
				    											postion: "insideBottom",
				    											textStyle: {color: "black"}
				    										}
												}
							},
							type:'bar',
							barGap: "-100%",
							//stack: 'menses',
							data: mensesPeriodArray,
							markLine : {
											symbol: "none",
							                data : [
							                    // 纵轴，默认
							                    	{
							                    		type : 'average', 
							                    		name : '周期平均值'							                    		
							                    	}
							                ],
							                
							                itemStyle:{
					                    					normal:{
					                    								color:'#A3A3A3',
					                    								label: {
					                    											show: false
					                    										},
					                    								lineStyle: {
					                    											 width: 1,
					                    											 type: "dashed"
					                    										   }
					                    							}
				                    				   }
							            }	
						},
						{
							name:'经期',
							itemStyle:{
										normal: {
													color:"#fd6969",
													barBorderRadius:0,
													label: {
                    											show: true,
                    											postion: "insideBottom",
                    											textStyle: {color: "black"}
                    										}				  	
												},
							},
							type:'bar',						
							//stack: 'menses',
							data: mensesDurationArray,
							markLine : {
											symbol: "none",
							                data : [
							                    // 纵轴，默认
							                    	{
							                    		type : 'average', 
							                    		name : '经期平均值', 							                    		
							                    	}
							                ],
							                
							                itemStyle:{
				                    					normal:{
				                    								color:'#A3A3A3',
				                    								label: {
				                    											show: false
				                    										},
				                    								lineStyle: {
				                    											 width: 1,
				                    											 type: "dashed"
				                    										   }
				                    							}
							                    		}
							            }										
						}
						
						
			]
		});
}


   /****************************************** 
  	 宫颈粘液
   *******************************************/
   
function setMucusBarChartOption(){
	mucusBarChart.setOption({
			title : {
				text: mucusTitleText,
				subtext: mucusTitleSubtext,//副标题
				x: titlePosition,//标题位置
				textStyle:
						  {
							color: titleColor,
							fontSize: titleFontSize,
							fontWeight: titleFontWeight
						  }  
			},
			legend: {
						itemWidth: legendItemWidth,
                        itemHeight: legendItemHeight,
						x:legendPosition,
						selectedMode:false,
						data:[
							  	{
								  icon : mucusLegendIcon,
								  name : ' '
								 }
						  ]
			},
			grid:{
					x: gridX,
		  			y: gridY,
		  			x2: gridX2,
		  			y2: gridY2,
		  			borderWidth: 0
			},
			xAxis : [
				{
					type : 'category',
					data : mucusDateArray,
					splitNumber: mucusDateArray.length,
					axisLabel:{
								show: false
							  },
					axisTick:{
						show:false
					},
					axisLine:{
						show:false
					}
				}
			],
			yAxis : [
						{
							type : 'value',
							min:yAxis_min,
							max:yAxis_max,
							splitNumber:yAxis_splitNumber,
							axisLine:{
								show:false
							},							
							axisLabel:{
										show: false
									},
						}
			],
			color:['rgba(218,183,225,0.5)'],
			series : [
				{
					type:'bar',
					barGap:'0%',
					barCategoryGap:'0%',
					itemStyle:{
						normal: {
							
						},
						
					},
					data:mucusDataArray,
				}
			]
		});
}